import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
import ChatNavigation from './Navigation';
import {useNavigation} from '@react-navigation/native';
import {Box, Checkbox, HStack, Input, Pressable, Text, ScrollView, Button, Image, Flex} from 'native-base';
const ChatAddUser = () => {
  const navigation = useNavigation();
  const [searchText, setSearchText] = useState('');
  const insets = useSafeAreaInsets();
  const TabslList = ['按姓名选择', '按话题选择'];
  const [currentTab, setCurrentLabel] = useState('按姓名选择');
  const [next, setNext] = useState(true);

  const [users, setUsers] = useState<typeof originUsers>([]);
  const originUsers = useMemo(
    () => [
      {
        id: 1,
        name: '张三',
        nickname: '三哥',
        position: '前端工程师',
        avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
      },
      {
        id: 2,
        name: '李四',
        nickname: '四哥',
        position: '后端工程师',
        avatar: 'https://randomuser.me/api/portraits/men/2.jpg',
      },
      {
        id: 3,
        name: '王五',
        nickname: '五哥',
        position: '产品经理',
        avatar: 'https://randomuser.me/api/portraits/men/3.jpg',
      },
      {
        id: 4,
        name: '赵六',
        nickname: '六哥',
        position: 'UI设计师',
        avatar: 'https://randomuser.me/api/portraits/men/4.jpg',
      },
      {
        id: 5,
        name: '孙七',
        nickname: '七哥',
        position: '运营经理',
        avatar: 'https://randomuser.me/api/portraits/men/5.jpg',
      },
      {
        id: 6,
        name: '孙八',
        nickname: '八哥',
        position: '测试工程师',
        avatar: 'https://randomuser.me/api/portraits/men/6.jpg',
      },
      {
        id: 7,
        name: '周九',
        nickname: '九哥',
        position: '运维工程师',
        avatar: 'https://randomuser.me/api/portraits/men/7.jpg',
      },
      {
        id: 8,
        name: '吴十',
        nickname: '十哥',
        position: '数据库管理员',
        avatar: 'https://randomuser.me/api/portraits/men/8.jpg',
      },
      {
        id: 9,
        name: '郑十一',
        nickname: '十一哥',
        position: '网络安全工程师',
        avatar: 'https://randomuser.me/api/portraits/men/9.jpg',
      },
      {
        id: 10,
        name: '王十二',
        nickname: '十二哥',
        position: '前端工程师',
        avatar: 'https://randomuser.me/api/portraits/men/10.jpg',
      },
      {
        id: 11,
        name: '李十三',
        nickname: '十三哥',
        position: '后端工程师',
        avatar: 'https://randomuser.me/api/portraits/men/11.jpg',
      },
      {
        id: 12,
        name: '张十四',
        nickname: '十四哥',
        position: '产品经理',
        avatar: 'https://randomuser.me/api/portraits/men/12.jpg',
      },
      {
        id: 13,
        name: '赵十五',
        nickname: '十五哥',
        position: 'UI设计师',
        avatar: 'https://randomuser.me/api/portraits/men/13.jpg',
      },
      {
        id: 14,
        name: '钱十六',
        nickname: '十六哥',
        position: '运营经理',
        avatar: 'https://randomuser.me/api/portraits/men/14.jpg',
      },
      {
        id: 15,
        name: '孙十七',
        nickname: '十七哥',
        position: '测试工程师',
        avatar: 'https://randomuser.me/api/portraits/men/15.jpg',
      },
    ],
    [],
  );
  const [labelList] = useState([
    '燃煤发电',
    '燃料构成',
    '燃煤系统',
    '汽水系统',
    '抽汽凝汽式机组',
    '纯背压机组',
    '抽汽背压机组',
    '发变组系统',
    '厂用电系统',
    'UPS系统',
    '1XX标签',
    '2XX标签',
    '3XX标签',
  ]);
  const [selectLabel, setLabel] = useState(['燃煤发电', 'UPS系统']);
  const searchUsers = useCallback(() => {
    if (searchText) {
      return originUsers.filter(user => user.name.includes(searchText) || user.nickname.includes(searchText));
    }
    return originUsers;
  }, [originUsers, searchText]);

  useEffect(() => {
    setUsers(searchUsers());
  }, [searchText, originUsers, searchUsers]);

  const handleSearchTextChange = async (text: string) => {
    setSearchText(text);
  };

  const renderNameBox = () => {
    return (
      <Box flex={1} px={2}>
        <Input variant="rounded" my={2} placeholder="搜索昵称姓名" value={searchText} onChangeText={handleSearchTextChange}></Input>
        <ScrollView mb="2" flex={1}>
          {users.map(user => (
            <Pressable key={user.id} flexDirection="row" alignItems="center" bg="white" p={2} borderRadius={4} my={2}>
              <Image source={{uri: user.avatar}} alt={user.name} size={10} mr={2} />
              <Box>
                <Text fontSize="md" fontWeight="bold">
                  {user.nickname}
                </Text>
                <Text fontSize="sm" color="gray.500">
                  {user.name} {user.position}
                </Text>
              </Box>
              <Box ml="auto" borderWidth={1} borderColor="gray.300" borderRadius={4} size={6} justifyContent="center" alignItems="center">
                <Checkbox aria-label="123" value="test" accessibilityLabel="This is a dummy checkbox" />
              </Box>
            </Pressable>
          ))}
        </ScrollView>
        <Box w="full" p="8" pt="1">
          <Button bg="green.500" onPress={() => navigation.goBack()}>
            <Text bold color="white">
              发出邀请
            </Text>
          </Button>
        </Box>
      </Box>
    );
  };
  const renderLabelBox = () => {
    if (next) {
      return (
        <Box flex={1} px={2}>
          <Flex flex={1} flexDir="row" flexWrap="wrap">
            {labelList.map((item, index) => (
              <Pressable
                key={index}
                bg={selectLabel.includes(item) ? '#007AFF' : '#fff'}
                borderRadius={4}
                borderWidth={1}
                borderColor="#eee"
                p={2}
                m={2}
                onPress={() => {
                  if (selectLabel.includes(item)) {
                    setLabel(selectLabel.filter(label => label !== item));
                  } else {
                    setLabel([...selectLabel, item]);
                  }
                }}>
                <Text color={selectLabel.includes(item) ? '#fff' : '#000'}>{item}</Text>
              </Pressable>
            ))}
          </Flex>
          <Box w="full" p="8" pt="1">
            <Button bg="green.500" onPress={() => setNext(false)}>
              <Text bold color="white">
                下一步
              </Text>
            </Button>
          </Box>
        </Box>
      );
    } else {
      return (
        <Box flex={1} px={2}>
          <ScrollView mb="2" flex={1}>
            {originUsers.map(user => (
              <Pressable key={user.id} flexDirection="row" alignItems="center" bg="white" p={2} borderRadius={4} my={2}>
                <Image source={{uri: user.avatar}} alt={user.name} size={10} mr={2} />
                <Box>
                  <Text fontSize="md" fontWeight="bold">
                    {user.nickname}
                  </Text>
                  <Text fontSize="sm" color="gray.500">
                    {user.name} {user.position}
                  </Text>
                </Box>
                <Box ml="auto" borderWidth={1} borderColor="gray.300" borderRadius={4} size={6} justifyContent="center" alignItems="center">
                  <Checkbox aria-label="123" value="test" accessibilityLabel="This is a dummy checkbox" />
                </Box>
              </Pressable>
            ))}
          </ScrollView>
          <Box w="full" p="8" pt="1">
            <Button bg="green.500" onPress={() => setNext(true)} mb="3">
              <Text bold color="white">
                上一步
              </Text>
            </Button>
            <Button bg="green.500" onPress={() => navigation.goBack()}>
              <Text bold color="white">
                发出邀请
              </Text>
            </Button>
          </Box>
        </Box>
      );
    }
  };
  return (
    <SafeAreaView style={{flex: 1, backgroundColor: '#efefef', paddingTop: insets.top, paddingBottom: insets.bottom}} edges={['left', 'right']}>
      <ChatNavigation title="邀请用户" showMore={false} />
      <HStack space={3} justifyContent="center" px={2} mt="2">
        {TabslList.map(item => (
          <Pressable
            onPress={() => setCurrentLabel(item)}
            key={item}
            bg={currentTab === item ? 'green.300' : 'white'}
            flex={1}
            borderRadius="4"
            borderWidth={1}
            borderColor="#ccc"
            py="1"
            justifyContent="center"
            alignItems={'center'}>
            <Text>{item}</Text>
          </Pressable>
        ))}
      </HStack>
      {currentTab === '按姓名选择' ? renderNameBox() : renderLabelBox()}
    </SafeAreaView>
  );
};

export default ChatAddUser;
